<template>
  <div>
    <div class="app-page">
      <org-tree
        class="orgTree"
        title="组织机构"
        :tree-data="orgTreeData"
        :mouse-button="false"
        :loading="$loadingPlugin.getData"
        @currentChange="orgChange"
      />
      <div class="main-config">
        <h4>系统默认派单规则</h4>
        <div style="padding-left: 10px;">系统依次按照下单时间，根据电子围栏按照所选派单策略配置进行自动派单</div>
        <h4>派单限制</h4>
        <div style="padding-left: 10px;">
          <el-checkbox v-model="input1" @change="chooseInput1">
            配送员持单量大于等于 <el-input v-model.number="configData.maxOrderCount" style="width: 65px;" oninput="value=value.replace(/[^\d]/g,'')" :disabled="disabled1" :max="399" :min="0" /> 单时，系统将不在继续自动分派订单给该配送员
          </el-checkbox>
        </div>
        <div style="padding-left: 10px; margin-top: 10px;">
          <el-checkbox v-model="input2" @change="chooseInput2">
            配送员持单量小于 <el-input v-model.number="configData.minOrderCount" style="width: 65px;" oninput="value=value.replace(/[^\d]/g,'')" :disabled="disabled2" :max="399" :min="0" /> 单时，系统将进行无限制自动派单
          </el-checkbox>
        </div>
        <div style="padding-left: 10px; margin-top: 10px;">
          <el-checkbox v-model="input5" @change="chooseInput5">开启自动派单50型不允许三轮车配送工配送</el-checkbox>
        </div>
        <div style="padding-left: 10px; margin-top: 10px;">
          <el-checkbox v-model="input6" @change="chooseInput6">开启手动派单、下单50型不允许三轮车配送工配送</el-checkbox>
        </div>
        <h4>预约时间规则</h4>
        <div style="padding-left: 10px;">
          <el-checkbox v-model="input3" @change="chooseInput3">
            在距订单预约时间开始前 <el-input v-model.number="configData.beforeAppointment" style="width: 65px;" oninput="value=value.replace(/[^\d]/g,'')" :disabled="disabled3" :max="1000" :min="0" /> 分钟进行自动派单。否则系统暂时不自动分派订单
          </el-checkbox>
        </div>
        <h4>大车自动派单</h4>
        <div style="padding-left: 10px;">
          <el-checkbox v-model="input4" @change="chooseInput4">
            开启大车自动派单（大车的自动派单，不受其他派单规则的限制）
          </el-checkbox>
        </div>
        <div style="margin-top: 50px;">
          <div>
            <el-button v-permission="[50504,1]" style="margin: auto;" type="primary" icon="el-icon-circle-plus" @click="save">保存配置</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { organizationQueryList, orderDispatchRuleUpdate, orderDispatchRuleDetail } from '@/api'
  import { parseTime } from '@/utils'
  import getTreeData from '@/utils/jsonTree'
  import OrgTree from '@/views/components/OrgTree'
  export default {
    name: 'stationConfig',
    components: {
      OrgTree
    },
    data() {
      return {
        parseTime,
        orgTreeData: [],
        currentOrg: null,
        input1: false,
        input2: false,
        input3: false,
        input4: false,
        input5: false,
        input6: false,
        disabled1: true,
        disabled2: true,
        disabled3: true,
        configData: {
          maxOrderCount: null,
          minOrderCount: null,
          beforeAppointment: null,
          driverDispatchFlag: null
        }

      }
    },
    created() {
      this.getData()
    },
    methods: {
      // 获取组织机构数据
      async getData() {
        const res = await organizationQueryList({})
        const data = res.data.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.orgTreeData = getTreeData(data)
      },
      // 选择组织机构变化
      orgChange(current) {
        this.currentOrg = current
        this.getConfigData()
      },
      // 保存
      save() {
        const params = {
          ...this.configData,
          orgId: this.currentOrg.orgId
        }
        console.log(params)
        orderDispatchRuleUpdate(params).then(res => {
          this.$notify({
            title: '提示',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          this.getConfigData()
        })
      },
      chooseInput1(val) {
        if (val) {
          this.disabled1 = !val
        } else {
          this.disabled1 = !val
          this.configData.maxOrderCount = null
        }
      },
      chooseInput2(val) {
        if (val) {
          this.disabled2 = !val
        } else {
          this.disabled2 = !val
          this.configData.minOrderCount = null
        }
      },
      chooseInput3(val) {
        if (val) {
          this.disabled3 = !val
        } else {
          this.disabled3 = !val
          this.configData.beforeAppointment = null
        }
      },
      chooseInput4(val) {
        if (val) {
          this.configData.driverDispatchFlag = 1
        } else {
          this.configData.driverDispatchFlag = 0
        }
      },
      chooseInput5(val) {
        if (val) {
          this.configData.tricycleAutoDispatchFifty = 1
        } else {
          this.configData.tricycleAutoDispatchFifty = 0
        }
      },
      chooseInput6(val) {
        if (val) {
          this.configData.tricycleDispatchFifty = 1
        } else {
          this.configData.tricycleDispatchFifty = 0
        }
      },
      async getConfigData() {
        const res = await orderDispatchRuleDetail({ orgId: this.currentOrg.orgId })
        console.log(res.data)
        if (res.data) {
          this.configData = { ...res.data }
          this.input1 = !!this.configData.maxOrderCount
          this.disabled1 = !this.configData.maxOrderCount
          this.input2 = !!this.configData.minOrderCount
          this.disabled2 = !this.configData.minOrderCount
          this.input3 = !!this.configData.beforeAppointment
          this.disabled3 = !this.configData.beforeAppointment
          this.input4 = !!this.configData.driverDispatchFlag
          this.input5 = !!this.configData.tricycleAutoDispatchFifty
          this.input6 = !!this.configData.tricycleDispatchFifty
          // this.disabled4 = !this.configData.beforeAppointment
        } else {
          this.configData = {
            maxOrderCount: null,
            minOrderCount: null,
            beforeAppointment: null
          }
          this.input1 = false
          this.input2 = false
          this.input3 = false
          this.input4 = false
          this.input5 = false
          this.input6 = false
          this.disabled1 = true
          this.disabled2 = true
          this.disabled3 = true
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
.app-page {
  display: flex;
  width: 100%;
  height: calc(100vh - 175px);
  padding: 0;
  .main-config {
    height: 100%;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    .table-list {
      /deep/ .has-gutter {
        .el-checkbox {
          display: none;
        }
      }
    }
    .config-item {
      margin-bottom: 20px;
    }
  }
  /deep/ .el-divider--horizontal {
    margin: 8px 0;
  }
}
</style>
